<!--使用方式-->
<!--
<template>
  <excel-export
        :exportSize="100"//导出数据条数，默认500条
        :cols="exportData.cols"//备选的所有导出列
        formKey="ProjectApproval"//填写对应表单时后台提供的实体对象名称
        url="/cybereng-project/form/export"//导出地址
        :ids="['id1','id2']"//勾选导出时，每一行数据的Id,可选传,传入空数组或者不传，导出所有
        :searchParams="{name:'',code:''}"//查询条件
  </excel-export>
</template>
<script>
  export default {
    data(){
      return {
         exportData: {
                visible:false,
                cols:[
                  {
                    columnComment:"项目编号",//每一列的中文名称
                    columnName:"prjCode"//每一列对应的字段
                  },
                  {
                    columnComment:"项目名称",
                    columnName:"prjName",
                  },
                  {
                    columnComment:"项目简称",
                    columnName:"prjSimpleName"
                  },
                  {
                    columnComment:"项目总投资(万元)",
                    columnName:"prjAllInvest"
                  },
                  {
                    columnComment:"项目类型",
                    columnName:"prjClass",
                    dic:'prj_class'//是否需要进行字典的转换
                  },
                  {
                    columnComment:"项目经理",
                    columnName:"prjManageUserName"
                  },
                  {
                    columnComment:"填写日期",
                    columnName:"createDate"
                  },
                  {
                    columnComment:"填写人",
                    columnName:"userFullname"
                  },
                ]
              },
      }
    }
 }
</script>
-->
<template>
  <div class="export">
    <fks-button
      v-bind="$attrs"
      @click="open"
    >
      <i
        style="vertical-align: middle; margin-right: 8px"
        class="fks-icon-export"
      />
      <span style="vertical-align: middle;">{{ LANG.IMPORT }}</span>
    </fks-button>
    <fks-dialog
      id="dialog"
      :visible.sync="visible"
      @opened="handleOpened"
      @close="handleClose"
    >
      <div slot="title">
        <i
          style="vertical-align: middle; margin-right: 8px;"
          class="fks-icon-export"
        />
        <span style="color: #191919">{{ LANG.EXPORT }}</span>
      </div>
      <fks-form
        ref="form"
        :model="form"
        :rules="rules"
      >
        <fks-form-item
          lead
          :span="12"
          label="导出文件名称"
          prop="excelName"
          label-width="120px"
        >
          <fks-input
            v-model="form.excelName"
            placeholder="请输入导出文件名称"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          label="sheet名称"
          prop="sheetName"
          label-width="120px"
        >
          <fks-input
            v-model="form.sheetName"
            placeholder="请输入sheet名称"
            maxlength="50"
          />
        </fks-form-item>
      </fks-form>
      <div class="transfer-container">
        <fks-transfer
          ref="transfer"
          v-model="value"
          :data="allCols"
          :titles="['备选导出列', '导出列']"
        >
          <span slot-scope="{ option }">
            {{ option.columnComment }}
          </span>
        </fks-transfer>
      </div>
      <div
        slot="footer"
        align="right"
      >
        <fks-button
          type="primary"
          :loading="loading"
          @click="handleExport"
        >
          <i
            class="fks-icon-check"
            style="margin-right: 8px;"
          /><span>{{ LANG.EXPORT }}</span>
        </fks-button>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import Sortable from 'sortablejs'
import { exportFile } from '@/utils/file'

export default {
  inheritAttrs: false,
  props: {
    //备选所有列
    cols: {
      type: Array,
      required: true
    },
    //业务对象
    formKey: {
      type: String,
      required: true
    },
    //勾选的Id
    ids: {
      type: Array,
      default() {
        return []
      }
    },
    //导出地址
    url: {
      type: String,
      required: true
    },
    //导出行数目
    exportSize: {
      type: Number,
      default: 500
    },
    searchParams: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    let value = []
    let allCols = this.cols.map((item, index) => {
      item.key = index
      //加上key
      value.push(index)
      return item
    })
    return {
      visible: false,
      loading: false,
      allCols: allCols, //所有列
      value: value, //右侧导出列的key数组
      form: {
        excelName: '',
        sheetName: ''
      }, //导出文件名称
      rules: {
        excelName: [
          {
            required: true
          }
        ]
      }
    }
  },
  methods: {
    //打开弹窗
    open() {
      this.visible = true
      // this.$emit("update:visible", true)
    },
    handleExport() {
      // 只是为了查看数据打印
      let exportFields = []
      this.value.forEach((key) => {
        let obj = this.allCols.find((item) => {
          return item.key === key
        })
        exportFields.push(obj)
      })
      let dataa = {
        exportFields: exportFields,
        excelName: this.form.excelName,
        sheetName: this.form.sheetName,
        formKey: this.formKey,
        ids: this.ids,
        exportSize: this.exportSize
        // searchParams: searchParams
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          let exportFields = []
          this.value.forEach((key) => {
            let obj = this.allCols.find((item) => {
              return item.key === key
            })
            exportFields.push(obj)
          })
          if (!exportFields.length) {
            this.$message.error('请至少选择一个导出列')
            return
          }
          //过滤掉查询条件为空或者null的条件
          let searchParams = {}
          Object.keys(this.searchParams).forEach((key) => {
            if (
              this.searchParams[key] !== null &&
              this.searchParams[key] !== ''
            ) {
              searchParams[key] = this.searchParams[key]
            }
          })
          // let data = {
          //   exportFields: exportFields,
          //   excelName: this.form.excelName,
          //   sheetName: this.form.sheetName,
          //   formKey: this.formKey,
          //   ids: this.ids,
          //   exportSize: this.exportSize,
          //   searchParams: searchParams,
          //       // formKey: this.formKey,
          //       // field: item.searchName,S
          // }
          let query = []
          this.cols.forEach((item) => {
            let queryItem = {
              content: '',
              field: item.field,
              symbol: 'like'
            }
            query.push(queryItem)
          })
          let data = {
            formKey: this.formKey,
            page: '1',
            query,
            size: '999'
          }
          this.loading = true
          request({
            url: this.url,
            method: 'post',
            data: data,
            responseType: 'blob'
          })
            .then((res) => {
              this.loading = false
              exportFile(res)
            })
            .catch((err) => {
              this.loading = false
            })
        } else {
          this.$message.error('请检查表单是否合格')
        }
      })
    },
    handleOpened() {
      const transfer = this.$refs.transfer.$el
      const rightPanel = transfer
        .getElementsByClassName('fks-transfer-panel')[1]
        .getElementsByClassName('fks-transfer-panel__body')[0]
      const rightEl = rightPanel.getElementsByClassName(
        'fks-transfer-panel__list'
      )[0]
      Sortable.create(rightEl, {
        animation: 150,
        onEnd: (evt) => {
          const { oldIndex, newIndex } = evt
          const oldValue = this.value[oldIndex]
          //删除原来的数据
          this.value.splice(oldIndex, 1)
          //将数据新增到指定索引位置
          this.value.splice(newIndex, 0, oldValue)
        }
      })
      rightPanel.ondragover = (ev) => {
        ev.preventDefault()
      }
      rightPanel.ondrop = (ev) => {
        ev.preventDefault()
      }
    },
    handleClose() {
      // this.$emit("update:visible", false)
      this.visible = false
    }
  }
}
</script>
<style>
</style>
<style lang="scss" scoped>
.export {
  display: inline-block;
  margin-left: 10px;
  // margin-right: 10px;
}

::v-deep .fks-dialog {
  text-align: left;

  .fks-dialog__header {
    position: relative;
    height: 56px;

    .fks-dialog__headerbtn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .fks-dialog__body {
    overflow: hidden;
  }

  .fks-form {
    // margin-top: 15px;
    margin-bottom: 8px;
  }

  .fks-form-item__label {
    text-align: left !important;
  }

  .transfer-container {
    display: flex !important;
    justify-content: space-between;
    height: 425px;
    margin: 0 auto;

    .fks-transfer__buttons {
      position: relative;
      width: 32px;
      padding: 0 16px;

      .fks-transfer__button {
        display: block;
        margin-left: 0 !important;
        border-color: #acbaf7;
        color: #2f53ea;
        background: #fff;

        &:hover {
          border-color: #2f53ea;
          color: #2f53ea;
        }

        &.is-disabled {
          border-color: #eee;
          color: #ccc !important;
          background: #f5f5f5 !important;
        }

        &:active {
          background-color: #eaeefd;
        }

        &:nth-child(1) {
          position: absolute;
          top: -10px;
          width: 32px;
          min-width: 32px !important;
          height: 32px;
          text-align: center;

          &.is-disabled {
            width: 32px;
            height: 32px;
            color: #f5f5f5;
            background: #f5f5f5;
          }

          span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            transform: translate(-50%, -50%);

            i {
              left: 50%;
              width: 100%;
              //top:50%;
            }
          }

          /* background:#e7ebfd; */

          /* color:#294be8; */

          /* border-radius: 4px; */
        }

        &:nth-child(2) {
          position: absolute;
          top: -50px;
          width: 32px;
          min-width: 32px !important;
          height: 32px;

          &.is-disabled {
            width: 32px;
            height: 32px;
            text-align: center;
            color: #f5f5f5;
            background: #f5f5f5;
          }

          span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            transform: translate(-50%, -50%);

            i {
              top: 50%;
              right: 50%;
              width: 100%;
              margin-left: 0;
            }
          }
        }

        .fks-icon-arrow-left {
          margin-right: 8px;
        }
      }
    }

    .fks-transfer-panel {
      width: 416px;
      border: 1px solid #ddd;

      .fks-transfer-panel__header {
        height: 48px;
        line-height: 48px;
        background: #fff;

        .fks-checkbox__input {
          top: -1px;
          width: 16px;
          height: 16px;

          .fks-checkbox__inner {
            width: 100%;
            height: 100%;

            &::before {
              top: 1px;
            }

            &::after {
              top: 2px;
            }
          }
        }

        .fks-checkbox {
          align-items: center;
          height: 48px;

          .fks-checkbox__label {
            font-size: 14px;
            line-height: 48px;
            color: #555;

            span {
              font-size: 14px;
              color: #999;
            }
          }
        }
      }

      .fks-transfer-panel__body {
        height: 425px !important;

        .fks-transfer-panel__item {
          width: 100%;
          height: 36px;

          .fks-checkbox__input {
            width: 16px;
            height: 16px;
            line-height: 0;

            .fks-checkbox__inner {
              width: 100%;
              height: 100%;

              &::after {
                top: 2px;
              }
            }
          }

          .fks-checkbox__label {
            font-size: 14px;
            color: #555;
          }
        }

        .fks-transfer-panel__list {
          height: calc(100% - 48px);
          overflow-x: hidden;

          /* overflow-y: overlay; */
        }

        .fks-transfer-panel__empty {
          margin-top: 130px;
          color: #999;
        }
      }
    }
  }
}
</style>

